<template>
  <div class="topGoods">
    <!-- 标题 -->
    <div class="title">
      <span></span>
      人气商品
      <span></span>
    </div>
    <!-- 标题 -->
    <div class="content" ref="content">
      <div>
        <template v-for="(num, i) in goods">
          <div class="goods" :key="i">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fepaper.nfncb.cn%2Fnfnc%2FIMAGE%2F20100826%2F120027.jpg&refer=http%3A%2F%2Fepaper.nfncb.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650644755&t=83f81c011120c0829ffaac56846c7e01"
              alt=""
            />
            <div class="name">商品{{ i }}</div>
            <div class="price">￥888</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Toast } from "vant";

export default {
  data() {
    return {
      goods: 12,
    };
  },
  mounted() {
    const bs = new BScroll(this.$refs.content, {
      pullUpLoad: {
        threshold: 50,
      },
      scrollbar: true,
      pullDownRefresh: true,
    });

    // 监听上拉
    bs.on("pullingUp", () => {
      Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中...",
      });
      console.log("获取更多数据：第", this.goods / 6);
      // 发送异步请求
      setTimeout(() => {
        this.goods += 6;
        Toast.clear();
        bs.finishPullUp();
      }, 3000);
    });
  },
};
</script>

<style lang="scss" scoped>
.topGoods {
  // title
  .title {
    width: 100%;
    height: 27px;
    font-size: 28px;
    color: #333333;
    text-align: center;
    margin-top: 43px;
    margin-bottom: 68px;

    span {
      width: 20px;
      height: 4px;
      display: inline-block;
      background: #333333;
      position: relative;
      top: -8px;
      right: 16px;
      &:nth-of-type(2) {
        left: 16px;
        right: 0;
      }
    }
  }

  // content
  .content {
    width: 100%;
    height: 900px;
    overflow: hidden;
    padding: 0 29px;
    box-sizing: border-box;
    background-color: #f6f5f5;

    .goods {
      width: 330px;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      padding: 10px;
      box-sizing: border-box;
      display: inline-block;
      margin-bottom: 20px;

      &:nth-child(2n) {
        margin-left: 29px;
      }

      img {
        width: 310px;
      }

      .name {
        font-size: 24px;
        color: #999999;
        margin: 24px 0;
      }

      .price {
        font-size: 20px;
        color: red;
      }
    }
  }
}
</style>
